﻿<script>
    $(document).ready(function () {
        $('#dataTable').dataTable({
            "bProcessing": true,
            "sAjaxSource": 'api/product?catId=@Model',
            "sAjaxDataProp": "",
            "bSort": true,
            "bFilter": true,
            "bLengthChange": true,
            "aoColumnDefs": [
                 { "aTargets": [0], "mData": "No", "sTitle": "No.", "sWidth": "50px" },
                 { "aTargets": [1], "mData": "Photo", "sTitle": "Photo", "sWidth": "80px",
                     "fnRender": function (o, val) {
                         return "<div class='prdThumb60'><img src='" + val + "' /></div>";
                     }
                 },
                 { "aTargets": [2], "mData": "Name", "sTitle": "Name" },
                 { "aTargets": [3], "mData": "Price.Basic", "sTitle": "Basic Price", "sWidth": "70px" },
                 { "aTargets": [4], "mData": "Price.WholeSale", "sTitle": "Wholesale Price", "sWidth": "70px" },
                 { "aTargets": [5], "mData": "Status", "sTitle": "Status", "sWidth": "100px" },
                 { "aTargets": [6], "mData": null, "sTitle": "Action", "sWidth": "100px",
                     "fnRender": function (o, val) {
                         return "<a href='/Product/Edit/"+o.ID+"'>Edit</a> | <a href='#'>Delete</a>";
                     }
                 }
            ]
        });
    });
</script>
<div class="grid_14">
    <a href="/">Home</a> &gt; Product
    <hr />
</div>
<div class="grid_14">
    <div class="box">
        <h2>Products<b class="right"><a href="/Product/Edit">Add New Product</a></b></h2>
        <fieldset id="orderFilter">
            <legend>Filter</legend>
            @using(Html.BeginForm()){
            <p><label>Category:</label><select name="CategoryId" value="@Model">@Html.Action("SelectCategory","Include")</select></p>
            <p><label>Status:</label><select><option>All Status...</option></select></p>
            <p><label></label><input type="submit" value="Filter" /></p>
            }
        </fieldset>
        <table id="dataTable"></table>
        <div class="clear"></div>
    </div>
</div>